<template>
	<view>
		<view class="info_top">
			<u-image :border-radius="0" :src="info.img" height="750" width="750" :lazy-load="true" :fade="true" duration="300" mode="aspectFill">
				<u-loading slot="loading"></u-loading>
			</u-image>
			<view class="good_price_box u-flex u-padding-30">
				<text class="good_price">￥ {{ info.good_price }}</text>
				<text class="good_num u-margin-left-30">库存剩余： {{ info.good_num }}</text>
			</view>
		</view>
		<u-toast ref="uToast" :icon='false' />
		<view class="u-padding-30">
			<text class="good_name">{{ info.good_name }}</text>
		</view>

		<!-- 富文本区域 -->
		<view class="u-padding-25">
			<u-parse
				class="u-padding-bottom-180"
				:html="info.content"
				:seletable="true"
				:lazy-load="true"
				show-with-animation
				:tag-style="{
					img: 'display: block;border-radius: 10rpx;'
				}"
			></u-parse>
		</view>

		<!-- 下单条 -->
		<view class="place_order u-flex u-row-between">
			<view class="u-flex">
				<!-- <text>数量:</text> -->
				<u-number-box :size="32" v-model="num" bg-color="#ff9900" color="#fff" :min="1" :step="1" @change="change"></u-number-box>
			</view>
			<view class="right"><view class="buy btn u-line-1" @click="buy">立即购买</view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: 1, // 商品数量
			id: '',
			info: {} // 详情对象
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.$u.api.goods_info({ goods_id: this.id }).then(res => {
			this.info = res.info;
		});
	},
	methods: {
		change() {},
		buy() {
			uni.showLoading({
				title: 'Loading...',
				mask: true
			});
			this.$u.api
				.goods_order({
					goods_id: this.id,
					num: this.num
				})
				.then(res => {
					if(res.code == 1){
						uni.hideLoading();
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.info.timeStamp.toString(),
							nonceStr: res.info.nonceStr,
							package: res.info.package,
							signType: res.info.signType,
							paySign: res.info.paySign,
							success: res => {
								this.$u.route({
									type: 'back'
								});
							},
							fail: err => {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}else if(res.code == 2){
						this.$refs.uToast.show({
							title: `${res.msg}`,
							type: 'warning',
							position: 'bottom',
							icon: false,
							callback: () => {
								this.$u.route({
									url: 'pages/goods_order/userOrder',
									params: {},
								})
							}
							
						});
					}else{
						if(res.login){
							this.$refs.uToast.show({
								title: `${res.msg}`,
								type: 'warning',
								position: 'bottom',
								icon: false,
								callback: () => {
									this.$u.route({
										url: 'pages/userInfo/index',
										params: {},
									})
								}
								
							});
						}else{
							this.$refs.uToast.show({
							title: `${res.msg}`,
							type: 'warning',
							position: 'bottom',
							icon: false,
							
						});
						}
					}
					
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.good_num {
	color: #909399;
}
.right {
	display: flex;
	font-size: 28rpx;
	align-items: center;
	.btn {
		line-height: 66rpx;
		padding: 0 30rpx;
		border-radius: 36rpx;
		color: #ffffff;
	}
	.cart {
		background-color: #ed3f14;
		margin-right: 30rpx;
	}
	.buy {
		background-color: #ff7900;
	}
}
.place_order {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 30rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	height: 150rpx;
	background: #e4e7ed;
}
.good_price {
	color: #ff9900;
	font-size: 45rpx;
	font-weight: 900;
}
.good_price_box {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 130rpx;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.618);
	border-top-right-radius: 10rpx;
	border-top-left-radius: 10rpx;
}
.info_top {
	position: relative;
	width: 750rpx;
	height: 750rpx;
}
.good_name {
	font-weight: 900;
}
</style>
